<template>
  <div class="nav">
    <el-aside class="aside" style="width:100%">
      <el-menu
        :default-active="active"
        class="el-menu-vertical-demo"
        background-color="#3A3D4C"
        text-color="#fff"
        active-text-color="#01a5a7"
        :collapse="isCollapse"
        router
      >
	     <!-- unique-opened -->
        <NavItem v-for="v in navList" :key="v.path" :item="v" :basePath="v.path" 
			:showIcon="true"></NavItem>
      </el-menu>
	  <i class="icon"
	     :class="isCollapse?'el-icon-s-unfold':'el-icon-s-fold'"
	  	:style="{'left':isCollapse?'20px':'80px'}"
	  	@click="isCollapse=!isCollapse">
	  </i>
    </el-aside>
	
  </div>
</template>
<script>
import NavItem from "./NavItem";
export default {
  data() {
    return {
      isCollapse: false, // 是否水平折叠收起菜单
      active: "/homeSet/notic", // 高亮显示的路由
      navList: [
        {
          title: "首页配置",
          path: "/homeSet",
		  icon:'icon-huiyuanguanli',
          subMenu: [
            {
              title: "首页公告",
              path: "/homeSet/notic",
            },
			{
			  title: "通知公告",
			  path: "/homeSet/noticNews",
			},
            {
              title: "轮播图",
              path: "/homeSet/swiper",
            },
			{
			  title: "购销价格",
			  path: "/homeSet/goldPrice",
			},
			{
			  title: "注意事项",
			  path: "/homeSet/payment",
			},
			{
			  title: "地址管理",
			  path: "/homeSet/address",
			},
			{
			  title: "协议管理",
			  path: "/homeSet/agreement",
			},
			{
			  title: "常见问题",
			  path: "/homeSet/know",
			},
			{
			  title: "联系我们",
			  path: "/homeSet/bookaddress",
			},
			// {
			//   title: "业务说明",
			//   path: "/homeSet/serDesc",
			// },
			// {
			//   title: "信息公示",
			//   path: "/homeSet/annInfo",
			// },
			// {
			//   title: "新手引导",
			//   path: "/homeSet/novice",
			// },
			{
			  title: "文案编辑",
			  path: "/homeSet/textEdit",
			},
			{
			  title: "全局配置",
			  path: "/homeSet/config",
			},
          ],
        },
		{
		  title: "采购管理",
		  path: "/buyerSys",
		  icon:'icon-qiyeguanli_yuangongguanli',
		  subMenu: [
		    {
		      title: "采购入库",
		      path: "/buyerSys/buyerInfo",
		    },
			{
			  title: "采购日报",
			  path: "/buyerSys/buyerDayData",
			},
			{
			  title: "存料日报",
			  path: "/buyerSys/inventoryDayData",
			},
			{
			  title: "变现记录",
			  path: "/buyerSys/bxList",
			},
			{
			  title: "数据查询",
			  path: "/buyerSys/dataQuery",
			},
		  ],
		},
		{
		  title: "用户管理",
		  path: "/userSys",
		  icon:'icon-qiyeguanli_yuangongguanli',
		  subMenu: [
		    {
		      title: "用户列表",
		      path: "/userSys/userList",
		    },
			{
			  title: "提现列表",
			  path: "/userSys/tixianList",
			}
		  ],
		},
		{
		  title: "押金管理",
		  path: "/depositSys",
		  icon:'icon-guanli',
		  subMenu: [
		    {
		      title: "押金账户",
		      path: "/depositSys/depositAccount",
		    },
			{
			  title: "押金流水",
			  path: "/depositSys/depositWater",
			},
			{
			  title: "交押金",
			  path: "/depositSys/handDep",
			},
			{
			  title: "退押金",
			  path: "/depositSys/refundDep",
			},
			{
			  title: "扣押金",
			  path: "/depositSys/deductDep",
			}
		  ],
		},
		{
		  title: "报单管理",
		  path: "/orderSys",
		  icon:'icon-cz-jl',
		  subMenu: [
		    {
		      title: "定价报单",
		      path: "/orderSys/orderSell",
		    },
			{
			  title: "行情报单",
			  path: "/orderSys/orderSellPrice",
			},
			{
			  title: "存料报单",
			  path: "/orderSys/orderSellKeep",
			}
		  ],
		},
      ],
    };
  },
  components: {
    NavItem,
  },
  created() {
    // 刷新页面后，当前路由下的导航菜单高亮显示
    this.active = this.$route.path;
  },
  methods: {
    handleMenu() {
      this.isCollapse = !this.isCollapse;
      if (this.isCollapse) {
        this.$notify({
          title: "成功",
          message: "已折叠菜单栏",
          type: "success",
        });
      } else {
        this.$notify({
          title: "成功",
          message: "已打开菜单栏",
          type: "success",
        });
      }
    },
  },
};
</script>
<style scoped>
.aside {
  height: calc(100vh - 60px);
  color: #fff;
  box-sizing: border-box;
  overflow-x: hidden;
  /* 隐藏滚动条 */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}
/* 隐藏滚动条 */
::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
.menu {
  text-align: left;
}
</style>
<style>
	.icon{
	  font-size: 20px;
	  margin-top: -2px;
	  margin-right: 20px;
	  cursor: pointer;
	  position: absolute;
	  bottom: 20px;
	  transition: all 0.3s;
	}
.el-menu-vertical-demo {
  padding-top: 30px;
  height: calc(100vh - 60px);
  box-sizing: border-box;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 210px;
  min-height: 400px;
}
</style>